JQuery

Uncaught TypeError dropzone is not a function at HTMLDocument anonymous

Uncaught TypeError dropzone is not a function at HTMLDocument anonymous, someone asked me to explain?

I am using dropzone.js for drag and drop file upload using JQuery in asp.net MVC. While running the application I got this following error "Uncaught TypeError dropzone is not a function at HTMLDocument anonymous" .

Uncaught TypeError dropzone is not a function

Layout.cshtml: 

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        Dropzone.autoDiscover = false;
        $("#dZUpload").dropzone({
            url: "GenericHandler.ashx",
            addRemoveLinks: true,
            success: function (file, response) {
                var imgName = response;
                file.previewElement.classList.add("dz-success");
                console.log("Successfully uploaded :" + imgName);
 
            },
 
            error: function (file, response) {
                file.previewElement.classList.add("dz-error");
            }
        });
    });
 
</script>
 
<h2>html5-file upload drag and drop</h2>
<div id="dZUpload" class="dropzone">
    <div class="dz-defaultdz-message"></div>

</div>

Solution:

Remove or comment (/* */) the following line from the layout.cshtml(Master Page) & reload the page, error gone. it's working fine. Now I am able to drag and drop upload images or files.. 

  @Scripts.Render("~/bundles/jquery")

 

 

 

Post your comments / questions